//
// Buttons
// --------------------------------------------------

// Gradients ==============================================================
/* These rules need to be applied before since they overwrite Bootstrap defaults */

.btn-gradient(@color) {
  #gradient > .vertical-three-colors(lighten(@color, 10%), @color, 50%, darken(@color, 5%));
}

.btn-background(@color) {
  background-color: @color;
}

.btn-border(@color) {
  border: 1px solid @color;
}

/* &-.button selectors are added in order to override the mapping and legacy usage of .button class */
.btn {
  &-default {
    .btn-background(lighten(@btn-default-bg, 5%));
    .btn-border(darken(@btn-default-bg, 10%));

    &:hover, 
    &:focus {
      .btn-background(lighten(@btn-default-bg, 5%));
      .btn-border(darken(@btn-default-bg, 20%));
      
      // Make sure the buttons have a proper focus highlight, 
      // despite changes from some bootstrap classes such as 'dropdown-toggle'.
      outline: revert;
    }
  }

  &-primary {
    .btn-background(@btn-primary-bg);
    .btn-border(@btn-primary-bg);

    &:hover {
      .btn-background(darken(@btn-primary-bg, 5%));
      .btn-border(darken(@btn-primary-bg, 5%));
    }
  }

  &-success, &-success.button {
    .btn-background(@btn-success-bg);
    .btn-border(@btn-success-bg);

    &:hover {
      .btn-background(darken(@btn-success-bg, 5%));
      .btn-border(darken(@btn-success-bg, 5%));
    }
  }

  &-info, &-info.button {
    .btn-background(@btn-info-bg);
    .btn-border(@btn-info-bg);

    &:hover {
      .btn-background(darken(@btn-info-bg, 5%));
      .btn-border(darken(@btn-info-bg, 5%));
    }
  }

  &-warning, &-warning.button {
    .btn-background(@btn-warning-bg);
    .btn-border(@btn-warning-bg);

    &:hover {
      .btn-background(darken(@btn-warning-bg, 5%));
      .btn-border(darken(@btn-warning-bg, 5%));
    }
  }

  &-danger, &-danger.button {
    .btn-background(@btn-danger-bg);
    .btn-border(@btn-danger-bg);

    &:hover {
      .btn-background(darken(@btn-danger-bg, 5%));
      .btn-border(darken(@btn-danger-bg, 5%));
    }
  }
}

// Spacing ================================================================

.btn,
.btn-group {
  margin-top: 2px;
  margin-bottom: 2px;
}

.btn-group .btn, 
.input-group-btn .btn {
  margin-top: 0;
  margin-bottom: 0;
}

// Mapping ================================================================

input.button, .buttonwrapper button, .buttonwrapper a {
  background-image: none; // XWIKI-7870
  .btn;
  .btn-primary;
}

.buttonwrapper input.secondary, .buttonwrapper button.secondary, .buttonwrapper a.secondary {
  .btn-default;
}

.buttonwrapper a, a.buttonwrapper{
  display: inline-block; // Making buttons and links look the same
}

a.button{
  .btn;
  .btn-primary;
}

a.secondary{
  .btn-default;
}

// Size ===================================================================
.btn-xs {
  min-height: @target-size-minimum;
  min-width: @target-size-minimum;
}

// Gradients & Mapping ====================================================
/* These rules need to be applied after since they overwrite the mapping. They cover the usage before Bootstrap adoption. */

input.button, .buttonwrapper button, .buttonwrapper a {
  .btn-background(@btn-primary-bg);
  .btn-border(@btn-primary-bg);
  &:hover {
    .btn-background(darken(@btn-primary-bg, 5%));
    .btn-border(darken(@btn-primary-bg, 5%));
  }
}

.buttonwrapper input.secondary, .buttonwrapper button.secondary, .buttonwrapper a.secondary, a.secondary {
  .btn-background(lighten(@btn-default-bg, 5%));
  .btn-border(darken(@btn-default-bg, 10%));

  &:hover, 
  &:focus {
    .btn-background(lighten(@btn-default-bg, 5%));
    .btn-border(darken(@btn-default-bg, 20%));
  }
}

// Buttons on the navbar ==================================================
.nav > li > .btn-link {
  position: relative;
  display: block;
  padding: @nav-link-padding;

  &:hover,
  &:focus {
    text-decoration: none;
    background-color: @nav-link-hover-bg;
  }
}

.navbar-nav {
  .btn-group {
    margin: 0;
  }

  > li > .btn-link {
    border: 0;
    line-height: @line-height-computed;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  @media (min-width: @grid-float-breakpoint) {
    > li > .btn-link {
      padding-top: @navbar-padding-vertical;
      padding-bottom: @navbar-padding-vertical;
    }
  }
}

.navbar-default .navbar-nav > li > .btn-link {
  color: @navbar-default-link-color;

  &:hover,
  &:focus {
    color: @navbar-default-link-hover-color;
    background-color: @navbar-default-link-hover-bg;
  }
}

// Buttons groups ==================================================
/* Manually overrides the default border round rules of the btn-group blocks in case of hidden input following the last
   visible button.
   The :not selectors are here to have a rule weight for this rule higher than the one making the intermediate buttons 
   without rounded corners. */
.btn-group > .btn-group-last:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: @border-radius-base;
  border-bottom-right-radius: @border-radius-base;
}
